<!--
 * @Description: 组题列表
 * @Author: yue
 * @Date: 2022-09-17 11:42:41
 * @LastEditors: yue
 * @LastEditTime: 2022-09-21 11:08:59
-->

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- NOTE：表头 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="10">
            <span class="keyword">关键字</span>
            <el-input
              v-model="info.keyword"
              style="width: 300px"
              placeholder="根据编号搜索"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-button size="small" @click="reset">清除</el-button>
              <el-button size="small" type="primary" @click="search">
                搜索
              </el-button>
            </el-row>
          </el-col>
        </el-row>

        <!-- NOTE：提示文件 -->
        <el-alert
          class="message"
          :title="`数据一共${questionsList.counts}条`"
          type="info"
          show-icon
          :closable="false"
        ></el-alert>

        <!-- NOTE：表格 -->
        <el-table :data="questionsList.items" :header-cell-style="headerStyle">
          <el-table-column
            prop="id"
            label="编号"
            width="200px"
          ></el-table-column>
          <el-table-column v-slot="{ row }" label="题型" width="100px">
            {{ questionType(row.questionType) }}
          </el-table-column>
          <el-table-column v-slot="{ row }" label="题目编号" width="220px">
            <el-link
              v-for="item in row.questionIDs"
              :key="item.number"
              type="primary"
              :underline="false"
              @click="preview(item)"
            >
              {{ item.number }}
            </el-link>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间"></el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            width="220px"
          ></el-table-column>
          <el-table-column
            prop="accuracyRate"
            label="正确率(s)"
            width="200px"
          ></el-table-column>
          <el-table-column prop="userName" label="录入人"></el-table-column>
          <el-table-column v-slot="{ row }" label="操作" width="100px">
            <el-row type="flex" justify="center">
              <el-button
                class="del-btn"
                icon="el-icon-delete"
                circle
                @click="removeQuestion(row)"
              ></el-button>
            </el-row>
          </el-table-column>
        </el-table>
        <!-- NOTE：分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            :current-page="info.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="20"
            layout="prev, sizes, pager, next, jumper"
            :total="questionsList.counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-row>

        <!-- NOTE：预览弹层 -->
        <questions-preview
          :show-dialog.sync="showDialog"
          :question-detail="questionDetail"
        ></questions-preview>
      </el-card>
    </div>
  </div>
</template>

<script>
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'

import {
  detail as getQuestionDetail,
  randoms as getQuestionsList,
  removeRandoms as removeQuestion
} from '@/api/hmmm/questions.js'

export default {
  components: {
    QuestionsPreview
  },
  data() {
    return {
      showDialog: false, // 弹层显示状态
      questionsList: {}, // 组题对象
      questionDetail: {}, // 题目详情
      // 搜索数据
      info: {
        page: 1,
        pagesize: 20,
        keyword: '' // 关键字
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    // 状态释义
    questionType(type) {
      return type === '1' ? '单选' : type === '2' ? '多选' : '简答'
    },
    // 清除
    reset() {
      this.info.keyword = ''
    },
    // 搜索
    async search() {
      try {
        const { data } = await getQuestionsList(this.info)
        this.questionsList = data
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 表头样式
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return `background-color: rgb(244, 244, 245);
    color: rgb(144, 147, 153);border-bottom:2px solid rgb(232, 232, 232)`
      }
    },
    // 删除
    async removeQuestion(id) {
      try {
        await removeQuestion(id)
        this.$message.success('删除成功')
        this.search()
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 分页函数
    handleSizeChange(pagesize) {
      this.info.pagesize = pagesize
      this.search()
    },
    handleCurrentChange(page) {
      this.info.page = page
      this.search()
    },
    // 预览
    async preview(obj) {
      try {
        const data = await getQuestionDetail(obj)
        this.questionDetail = data.data
        this.showDialog = true
      } catch (err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

<style scoped lang="scss">
// 关键字样式
.keyword {
  margin-left: 30px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #606060;
}
// 提示框
.message {
  margin: 10px 0;
}
// 删除按钮
.del-btn {
  color: rgb(245, 108, 108);
  background: rgb(254, 240, 240);
  border-color: rgb(251, 196, 196);
}
// 分页
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
// 跳转
::v-deep .el-pagination .el-pagination__jump {
  float: right;
  margin-left: 6px;
}
// 页码
::v-deep .el-pagination .el-pager {
  float: left;
  .number,
  .more {
    min-width: 0;
    width: 30px;
    height: 28px;
    margin: 0 8px;
    background-color: #f4f4f5;
  }
  .active {
    background-color: #409eff;
    color: #fff;
  }
}
// 左按钮
::v-deep .el-pagination .btn-prev {
  float: left;
  min-width: none;
  width: 30px;
  height: 28px;
  margin-right: 8px;
  background-color: #f4f4f5;
}
// 右按钮
::v-deep .el-pagination > .btn-next {
  float: left;
  width: 30px;
  height: 28px;
  margin-left: 8px;
  margin-right: 10px;
  text-align: center;
  background-color: #f4f4f5;
}
// 按钮
::v-deep .el-pagination button,
.el-pagination span:not([class*='suffix']) {
  min-width: 0;
  padding: 0;
}
</style>
